{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "58e2dedf95404f7cfe73707cb946144a4c1486fd"
   },
   "source": [
    "<p>Hi there!</p>\n",
    "<p>Today i want to play with the incredible library Plotly to make some interesting funnels.</p>\n",
    "<p>Im gonna use the dataSets from Ecommerce websites.</p>\n",
    "<p>My goal this weekend was develop some graphic funnels and extract some insights.</p>\n",
    "\n",
    "<ul>\n",
    "\t<li><a href=\"#C1\">1. Data preparation</a></li>\n",
    "\t<li><a href=\"#C2\">2. Basic conversion funnel</a></li>\n",
    "\t<li><a href=\"#C3\">3. Preparing and mergind data for the segmented funnels</a></li>\n",
    "\t<li><a href=\"#C4\">4. First segmented funnel - By gender</a></li>\n",
    "\t<li><a href=\"#C5\">5. Preparing data for the second segmented funnel</a></li>\n",
    "\t<li><a href=\"#C6\">6. Second segmented funnel - By gender and device</a></li>\n",
    "</ul>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "_cell_guid": "b1076dfc-b9ad-4769-8c92-a6c4dae69d19",
    "_uuid": "8f2839f25d086af736a60e9eeb907d3b93b6e0e5",
    "scrolled": true
   },
   "outputs": [
    {
     "ename": "ModuleNotFoundError",
     "evalue": "No module named 'plotly'",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mModuleNotFoundError\u001b[0m                       Traceback (most recent call last)",
      "\u001b[0;32m<ipython-input-4-3103c03c7358>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m\u001b[0m\n\u001b[1;32m      2\u001b[0m \u001b[0;32mimport\u001b[0m \u001b[0mpandas\u001b[0m \u001b[0;32mas\u001b[0m \u001b[0mpd\u001b[0m \u001b[0;31m# data processing, CSV file I/O (e.g. pd.read_csv)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m      3\u001b[0m \u001b[0;32mimport\u001b[0m \u001b[0mos\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m----> 4\u001b[0;31m \u001b[0;32mimport\u001b[0m \u001b[0mplotly\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m      5\u001b[0m \u001b[0;32mimport\u001b[0m \u001b[0mplotly\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mplotly\u001b[0m \u001b[0;32mas\u001b[0m \u001b[0mpy\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m      6\u001b[0m \u001b[0;32mfrom\u001b[0m \u001b[0mplotly\u001b[0m \u001b[0;32mimport\u001b[0m \u001b[0mgraph_objs\u001b[0m \u001b[0;32mas\u001b[0m \u001b[0mgo\u001b[0m\u001b[0;34m\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;31mModuleNotFoundError\u001b[0m: No module named 'plotly'"
     ]
    }
   ],
   "source": [
    "\n",
    "import numpy as np # linear algebra\n",
    "import pandas as pd # data processing, CSV file I/O (e.g. pd.read_csv)\n",
    "import os\n",
    "import plotly\n",
    "import plotly.plotly as py\n",
    "from plotly import graph_objs as go\n",
    "import plotly.figure_factory as ff\n",
    "from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot\n",
    "\n",
    "%matplotlib inline\n",
    "\n",
    "dfHome = pd.read_csv('./home_page_table.csv')\n",
    "dfSearch = pd.read_csv('./search_page_table.csv')\n",
    "dfPaymentC1 = pd.read_csv('./payment_confirmation_table.csv')\n",
    "dfPaymentP2 = pd.read_csv('./payment_page_table.csv')\n",
    "UserTable = pd.read_csv('./user_table.csv')\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "1a271d7935abcc84fcc7787e37d38610360092fc"
   },
   "source": [
    "At the first moment i want to explore the data and see how many not NaN values have each data set. I want to recall that each data set has only one step of the conversion funnel and they are connected by the user id"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "23ec7624d86cf6feeaefc02789684530d32e6f5d"
   },
   "outputs": [],
   "source": [
    "UserTable.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "92a3b0c79f4a0118a2121d7033a8ec1a3eefbb9f"
   },
   "outputs": [],
   "source": [
    "dfHome.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "3ce6760909649d7d67c2eafcf683fde977c62489"
   },
   "source": [
    "<strong><h2 id=\"C1\">Data preparation</h2></strong>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_cell_guid": "79c7e3d0-c299-4dcb-8224-4455121ee9b0",
    "_uuid": "d629ff2d2480ee46fbb7e2d37f6b5fab8052498a"
   },
   "outputs": [],
   "source": [
    "data_table = [['Phases', 'Values'],\n",
    "               ['dfHome', dfHome['user_id'].count()],\n",
    "               ['dfSearch', dfSearch['user_id'].count()],\n",
    "               ['dfPaymentP2', dfPaymentP2['user_id'].count()],\n",
    "               ['dfPaymentC1', dfPaymentC1['user_id'].count()],\n",
    "               ['UserTable', UserTable['user_id'].count()]]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "5b265eef497b38a70f641a712b0d224983bc89f0"
   },
   "outputs": [],
   "source": [
    "data_table"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "a4e9f793c6af2b9f6dbec79795dc5f2bf33ab8f5",
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "table = ff.create_table(data_table)\n",
    "iplot(table)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "231ed73a427df983175a91f64cc49fa763a0d417"
   },
   "source": [
    "Now i have a table where i can see the different steps of the funnel"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "23fc4b1d1d5c95c5dc3bcd70576422e3d917a1e4"
   },
   "source": [
    "<strong><h2 id=\"C2\">Basic conversion funnel</h2></strong>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "44697fc5d6eb37230749e2222547d5b4d929baa4"
   },
   "source": [
    "<p>Now i'm gonna make the first funnel. This funnel is gonna be basic.<br />In this first step i just want to show you how the differents phases changes the number of retention of the ussers.</p>\n",
    "<p>The phases are the same as from the dable</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_kg_hide-input": true,
    "_uuid": "f398ebfdaa11e5eae256c3a5e18a343106e66a71",
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "# chart stages data\n",
    "values = [90400, 45200, 6030, 452]\n",
    "phases = ['Home', 'Search', 'Payment', 'Confirm']\n",
    "\n",
    "# color of each funnel section\n",
    "colors = ['rgb(0, 102, 204)', 'rgb(51, 153, 255)', 'rgb(0, 102, 204)', 'rgb(204, 255, 255)']\n",
    "\n",
    "n_phase = len(phases)\n",
    "plot_width = 700\n",
    "\n",
    "# height of a section and difference between sections \n",
    "section_h = 100\n",
    "section_d = 10\n",
    "\n",
    "# multiplication factor to calculate the width of other sections\n",
    "unit_width = plot_width / max(values)\n",
    "\n",
    "# width of each funnel section relative to the plot width\n",
    "phase_w = [int(value * unit_width) for value in values]\n",
    "\n",
    "# plot height based on the number of sections and the gap in between them\n",
    "height = section_h * n_phase + section_d * (n_phase - 1)\n",
    "\n",
    "# list containing all the plot shapes\n",
    "shapes = []\n",
    "\n",
    "# list containing the Y-axis location for each section's name and value text\n",
    "label_y = []\n",
    "\n",
    "for i in range(n_phase):\n",
    "        if (i == n_phase-1):\n",
    "                points = [phase_w[i] / 2, height, phase_w[i] / 2, height - section_h]\n",
    "        else:\n",
    "                points = [phase_w[i] / 2, height, phase_w[i+1] / 2, height - section_h]\n",
    "\n",
    "        path = 'M {0} {1} L {2} {3} L -{2} {3} L -{0} {1} Z'.format(*points)\n",
    "\n",
    "        shape = {\n",
    "                'type': 'path',\n",
    "                'path': path,\n",
    "                'fillcolor': colors[i],\n",
    "                'line': {\n",
    "                    'width': 1,\n",
    "                    'color': colors[i]\n",
    "                }\n",
    "        }\n",
    "        shapes.append(shape)\n",
    "        \n",
    "        # Y-axis location for this section's details (text)\n",
    "        label_y.append(height - (section_h / 2))\n",
    "\n",
    "        height = height - (section_h + section_d)\n",
    "        \n",
    "# For phase names\n",
    "label_trace = go.Scatter(\n",
    "    x=[-350]*n_phase,\n",
    "    y=label_y,\n",
    "    mode='text',\n",
    "    text=phases,\n",
    "    textfont=dict(\n",
    "        color='rgb(255, 255, 255)',\n",
    "        size=15\n",
    "    )\n",
    ")\n",
    " \n",
    "# For phase values\n",
    "value_trace = go.Scatter(\n",
    "    x=[350]*n_phase,\n",
    "    y=label_y,\n",
    "    mode='text',\n",
    "    text=values,\n",
    "    textfont=dict(\n",
    "        color='rgb(200,200,200)',\n",
    "        size=15\n",
    "    )\n",
    ")\n",
    "\n",
    "data = [label_trace, value_trace]\n",
    " \n",
    "layout = go.Layout(\n",
    "    title=\"<b>Conversion Funnel</b>\",\n",
    "    titlefont=dict(\n",
    "        size=40,\n",
    "        color='rgb(255, 255, 255)'\n",
    "    ),\n",
    "    shapes=shapes,\n",
    "    height=560,\n",
    "    width=800,\n",
    "    showlegend=False,\n",
    "    paper_bgcolor='rgba(44,58,71,1)',\n",
    "    plot_bgcolor='rgba(44,58,71,1)',\n",
    "    xaxis=dict(\n",
    "        showticklabels=False,\n",
    "        zeroline=False,\n",
    "    ),\n",
    "    yaxis=dict(\n",
    "        showticklabels=False,\n",
    "        zeroline=False\n",
    "    )\n",
    ")\n",
    " \n",
    "fig = go.Figure(data=data, layout=layout)\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "57e9570cde033974976ea03372a0900b750e3ab8"
   },
   "source": [
    "<strong><h2 id=\"C3\">Preparing and mergind data for the segmented funnels</h2></strong>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "33e49cac2f5527fd4be7dfe3e8a1d6ab0192e4de"
   },
   "source": [
    "<p>As we can see this funnel represent the same thing as we see in the table from above but with more visual impact.</p>\n",
    "<p>Also, the ecommerce should focus on the drop between the Search page and the Payment page.<br />They should use some strategy in order to hold back the customer and try to not let him go</p>\n",
    "<p>The thing is that this is yet a little bit useless, i want to make a funnel with the variation per gender and device.</p>\n",
    "<p>Lets make in the first place the segmentation by gender</p>\n",
    "\n",
    "<p>To make that.<br />First of all i want to change the name of the columns adding the steps.<br />Then in the second place merge the different dataSets where we can have the steps.<br />In third place count the values of each step in order to make the famous table of the phases.</p>\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "70532e7871cb64513bb9482d7b50dfbf71178c83"
   },
   "outputs": [],
   "source": [
    "UserTable.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "d830350a82e8e898a0d97e0e8ce871a3222436e7"
   },
   "outputs": [],
   "source": [
    "dfHome = dfHome.rename(columns={'page':'Step One'})\n",
    "dfSearch = dfSearch.rename(columns={'page':'Step Two'})\n",
    "dfPaymentP2 = dfPaymentP2.rename(columns={'page':'Step Three'})\n",
    "dfPaymentC1 = dfPaymentC1.rename(columns={'page':'Step Four'})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "0db4bc29838d63641cd61428faa07112831a3f5a"
   },
   "outputs": [],
   "source": [
    "dfPaymentC1.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "3e8ae816db0571f8f717d246da4051234032975c"
   },
   "outputs": [],
   "source": [
    "dfT = UserTable.merge(dfHome, how ='outer',on='user_id').merge(dfSearch, how ='outer', on='user_id').merge(dfPaymentP2, how ='outer', on='user_id').merge(dfPaymentC1, how ='outer', on='user_id')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "18d33085255258dfbefb1b925fcfbd02b92c777b"
   },
   "outputs": [],
   "source": [
    "dfT.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "d06d68ebdbe229ba745d32d99e1ca2d6e5bcaaca"
   },
   "outputs": [],
   "source": [
    "Step_One_Male = (dfT['sex'] == 'Male') & (dfT['Step One'] == 'home_page')\n",
    "Step_One_Female = (dfT['sex'] == 'Female') & (dfT['Step One'] == 'home_page')\n",
    "\n",
    "Step_Two_Male = (dfT['sex'] == 'Male') & (dfT['Step Two'] == 'search_page')\n",
    "Step_Two_Female = (dfT['sex'] == 'Female') & (dfT['Step Two'] == 'search_page')\n",
    "\n",
    "Step_Three_Male = (dfT['sex'] == 'Male') & (dfT['Step Three'] == 'payment_page')\n",
    "Step_Three_Female = (dfT['sex'] == 'Female') & (dfT['Step Three'] == 'payment_page')\n",
    "\n",
    "Step_Four_Male = (dfT['sex'] == 'Male') & (dfT['Step Four'] == 'payment_confirmation_page')\n",
    "Step_Four_Female = (dfT['sex'] == 'Female') & (dfT['Step Four'] == 'payment_confirmation_page')\n",
    "\n",
    "data_table2 = [['Phases', 'Man', 'Woman'],\n",
    "               ['Home', Step_One_Male.sum(), Step_One_Female.sum()],\n",
    "               ['Search', Step_Two_Male.sum(), Step_Two_Female.sum()],\n",
    "               ['Payment', Step_Three_Male.sum(), Step_Three_Female.sum()],\n",
    "               ['Confirmation', Step_Four_Male.sum(), Step_Four_Female.sum()]]\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "5dee43fd61468e07a4a238b52f5804e32e12497b"
   },
   "outputs": [],
   "source": [
    "data_table2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "5e1e710852358539c3539e38890a4017aaab2b64"
   },
   "outputs": [],
   "source": [
    "table = ff.create_table(data_table2)\n",
    "iplot(table)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "578437d3d1a6bbf32c7f5440697a1564dc491d1e"
   },
   "source": [
    "To create the funnel i need a new dataFrame with the values per phase, and that values has to be integer not object"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "16bbbaf00c28085d8ea0e4f8f99ffb3245a299f4"
   },
   "outputs": [],
   "source": [
    "df = pd.DataFrame(np.array([['Home', 45325, 45075], ['Search', 22524, 22676], ['Payment', 2930, 3100], ['Confirmation', 211, 241]]),\n",
    "                            columns=['','Man', 'Woman'])\n",
    "df = df.set_index('')\n",
    "\n",
    "df['Man'] = df['Man'].astype('int')\n",
    "df['Woman'] = df['Woman'].astype('int')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "f9805036c5159071af8bec46f8dbf8bfd29ac1f6"
   },
   "outputs": [],
   "source": [
    "df.dtypes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "6e6785146d845dc902a36bf06670b1802f2d20fc"
   },
   "source": [
    "<strong><h2 id=\"C4\">First segmented funnel - By gender</h2></strong>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "98a7b2b9e7d337cfea3251673f52e879793c2d85"
   },
   "source": [
    "Once the data is ready, lets run the funnel!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_kg_hide-input": true,
    "_uuid": "3ebc8b8d8eb3d6d85e7b2a4922c9707d0f9c488c"
   },
   "outputs": [],
   "source": [
    "total = [sum(row[1]) for row in df.iterrows()]\n",
    "\n",
    "\n",
    "n_phase, n_seg = df.shape\n",
    "\n",
    "plot_width = 600\n",
    "unit_width = plot_width / total[0]\n",
    " \n",
    "phase_w = [int(value * unit_width) for value in total]\n",
    " \n",
    "# height of a section and difference between sections \n",
    "section_h = 100\n",
    "section_d = 10\n",
    "\n",
    "# shapes of the plot\n",
    "shapes = []\n",
    " \n",
    "# plot traces data\n",
    "data = []\n",
    " \n",
    "# height of the phase labels\n",
    "label_y = []\n",
    "\n",
    "height = section_h * n_phase + section_d * (n_phase-1)\n",
    "\n",
    "# rows of the DataFrame\n",
    "df_rows = list(df.iterrows())\n",
    "\n",
    "# iteration over all the phases\n",
    "for i in range(n_phase):\n",
    "    # phase name\n",
    "    row_name = df.index[i]\n",
    "    \n",
    "    # width of each segment (smaller rectangles) will be calculated\n",
    "    # according to their contribution in the total users of phase\n",
    "    seg_unit_width = phase_w[i] / total[i]\n",
    "    seg_w = [int(df_rows[i][1][j] * seg_unit_width) for j in range(n_seg)]\n",
    "    \n",
    "    # starting point of segment (the rectangle shape) on the X-axis\n",
    "    xl = -1 * (phase_w[i] / 2)\n",
    "    \n",
    "    # iteration over all the segments\n",
    "    for j in range(n_seg):\n",
    "        # name of the segment\n",
    "        seg_name = df.columns[j]\n",
    "        \n",
    "        # corner points of a segment used in the SVG path\n",
    "        points = [xl, height, xl + seg_w[j], height, xl + seg_w[j], height - section_h, xl, height - section_h]\n",
    "        path = 'M {0} {1} L {2} {3} L {4} {5} L {6} {7} Z'.format(*points)\n",
    "        \n",
    "        shape = {\n",
    "                'type': 'path',\n",
    "                'path': path,\n",
    "                'fillcolor': colors[j],\n",
    "                'line': {\n",
    "                    'width': 1,\n",
    "                    'color': colors[j]\n",
    "                }\n",
    "        }\n",
    "        shapes.append(shape)\n",
    "        \n",
    "        # to support hover on shapes\n",
    "        hover_trace = go.Scatter(\n",
    "            x=[xl + (seg_w[j] / 2)],\n",
    "            y=[height - (section_h / 2)],\n",
    "            mode='markers',\n",
    "            marker=dict(\n",
    "                size=min(seg_w[j]/2, (section_h / 2)),\n",
    "                color='rgba(255,255,255,1)'\n",
    "            ),\n",
    "            text=\"Segment : %s\" % (seg_name),\n",
    "            name=\"Value : %d\" % (df[seg_name][row_name])\n",
    "        )\n",
    "        data.append(hover_trace)\n",
    "        \n",
    "        xl = xl + seg_w[j]\n",
    "\n",
    "    label_y.append(height - (section_h / 2))\n",
    "\n",
    "    height = height - (section_h + section_d)\n",
    "    \n",
    "    # For phase names\n",
    "label_trace = go.Scatter(\n",
    "    x=[-350]*n_phase,\n",
    "    y=label_y,\n",
    "    mode='text',\n",
    "    text=df.index.tolist(),\n",
    "    textfont=dict(\n",
    "        color='rgb(200,200,200)',\n",
    "        size=15\n",
    "    )\n",
    ")\n",
    "\n",
    "data.append(label_trace)\n",
    " \n",
    "# For phase values (total)\n",
    "value_trace = go.Scatter(\n",
    "    x=[350]*n_phase,\n",
    "    y=label_y,\n",
    "    mode='text',\n",
    "    text=total,\n",
    "    textfont=dict(\n",
    "        color='rgb(200,200,200)',\n",
    "        size=15\n",
    "    )\n",
    ")\n",
    "\n",
    "data.append(value_trace)\n",
    "\n",
    "layout = go.Layout(\n",
    "    title=\"<b>Segmented Funnel Chart</b>\",\n",
    "    titlefont=dict(\n",
    "        size=20,\n",
    "        color='rgb(230,230,230)'\n",
    "    ),\n",
    "    hovermode='closest',\n",
    "    shapes=shapes,\n",
    "    showlegend=False,\n",
    "    paper_bgcolor='rgba(44,58,71,1)',\n",
    "    plot_bgcolor='rgba(44,58,71,1)',\n",
    "    xaxis=dict(\n",
    "        showticklabels=False,\n",
    "        zeroline=False,\n",
    "    ),\n",
    "    yaxis=dict(\n",
    "        showticklabels=False,\n",
    "        zeroline=False\n",
    "    )\n",
    ")\n",
    "\n",
    "fig = go.Figure(data=data, layout=layout)\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "194e1bbc4012d91ed8bc5eb05ce221f1a8f48272"
   },
   "source": [
    "<strong><h2 id=\"C5\">Preparing data for the second segmented funnel</h2></strong>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "b54baef4e5d18efe434de95a94fc9cb984a6d836"
   },
   "source": [
    "Wow! This funnel looks nice, but the difference between genders is very small, so... lets make something awesome and lets make a funnel segmented per devices and gender at the same time. Sounds good? Lets prepare the data again.\n",
    "<p>As we can see, the ecommerce should focus on the drop between the Search page and the Payment page.<br />They should use some strategy in order to hold back the customer and try to not let him go</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_kg_hide-input": true,
    "_uuid": "3a9a0a6830f0671f3a0def1946af42630bfee779"
   },
   "outputs": [],
   "source": [
    "Step_One_Desktop_Male =(dfT['sex'] == 'Male') &  (dfT['device'] == 'Desktop') & (dfT['Step One'] == 'home_page')\n",
    "Step_One_Mobile_Male =(dfT['sex'] == 'Male') & (dfT['device'] == 'Mobile') & (dfT['Step One'] == 'home_page')\n",
    "Step_One_Desktop_Female =(dfT['sex'] == 'Female') &  (dfT['device'] == 'Desktop') & (dfT['Step One'] == 'home_page')\n",
    "Step_One_Mobile_Female =(dfT['sex'] == 'Female') & (dfT['device'] == 'Mobile') & (dfT['Step One'] == 'home_page')\n",
    "\n",
    "Step_Two_Desktop_Male =(dfT['sex'] == 'Male') & (dfT['device'] == 'Desktop') & (dfT['Step Two'] == 'search_page')\n",
    "Step_Two_Mobile_Male =(dfT['sex'] == 'Male') & (dfT['device'] == 'Mobile') & (dfT['Step Two'] == 'search_page')\n",
    "Step_Two_Desktop_Female =(dfT['sex'] == 'Female') & (dfT['device'] == 'Desktop') & (dfT['Step Two'] == 'search_page')\n",
    "Step_Two_Mobile_Female =(dfT['sex'] == 'Female') & (dfT['device'] == 'Mobile') & (dfT['Step Two'] == 'search_page')\n",
    "\n",
    "Step_Three_Desktop_Male =(dfT['sex'] == 'Male') & (dfT['device'] == 'Desktop') & (dfT['Step Three'] == 'payment_page')\n",
    "Step_Three_Mobile_Male =(dfT['sex'] == 'Male') & (dfT['device'] == 'Mobile') & (dfT['Step Three'] == 'payment_page')\n",
    "Step_Three_Desktop_Female =(dfT['sex'] == 'Female') & (dfT['device'] == 'Desktop') & (dfT['Step Three'] == 'payment_page')\n",
    "Step_Three_Mobile_Female =(dfT['sex'] == 'Female') & (dfT['device'] == 'Mobile') & (dfT['Step Three'] == 'payment_page')\n",
    "\n",
    "Step_Four_Desktop_Male =(dfT['sex'] == 'Male') & (dfT['device'] == 'Desktop') & (dfT['Step Four'] == 'payment_confirmation_page')\n",
    "Step_Four_Mobile_Male =(dfT['sex'] == 'Male') & (dfT['device'] == 'Mobile') & (dfT['Step Four'] == 'payment_confirmation_page')\n",
    "Step_Four_Desktop_Female =(dfT['sex'] == 'Female') & (dfT['device'] == 'Desktop') & (dfT['Step Four'] == 'payment_confirmation_page')\n",
    "Step_Four_Mobile_Female =(dfT['sex'] == 'Female') & (dfT['device'] == 'Mobile') & (dfT['Step Four'] == 'payment_confirmation_page')\n",
    "\n",
    "data_tableTop = [['Phases', 'Desktop Male', 'Mobile Male', 'Desktop Female', 'Mobile Female'],\n",
    "               ['Home', Step_One_Desktop_Male.sum(), Step_One_Mobile_Male.sum(), Step_One_Desktop_Female.sum(), Step_One_Mobile_Female.sum()],\n",
    "               ['Search',Step_Two_Desktop_Male.sum(), Step_Two_Mobile_Male.sum(), Step_Two_Desktop_Female.sum(), Step_Two_Mobile_Female.sum()],\n",
    "               ['Payment', Step_Three_Desktop_Male.sum(), Step_Three_Mobile_Male.sum(), Step_Three_Desktop_Female.sum(), Step_Three_Mobile_Female.sum()],\n",
    "               ['Confirmation', Step_Four_Desktop_Male.sum(), Step_Four_Mobile_Male.sum(), Step_Four_Desktop_Female.sum(), Step_Four_Mobile_Female.sum()]]\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "772b3bccfe6eea6ed50b92b872bff82aa6672935"
   },
   "outputs": [],
   "source": [
    "data_tableTop"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "47c4f03b2cf129a5a4b2cfcdc90d5405af713267"
   },
   "outputs": [],
   "source": [
    "table = ff.create_table(data_tableTop)\n",
    "iplot(table)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "bdc4e8e8cc06bcfadc42d5e0b3af287686370d75"
   },
   "outputs": [],
   "source": [
    "dfFull = pd.DataFrame(np.array([['Home', 30203, 15122, 29997, 15078], ['Search', 15009, 7515, 15091, 7585], ['Payment', 1480, 1450, 1530, 1570], ['Confirmation', 76, 135, 74, 167]]),\n",
    "                            columns=['','Desktop Male', 'Mobile Male', 'Desktop Female', 'Mobile Female'])\n",
    "\n",
    "dfFull = dfFull.set_index('')\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "caf9098389549c0eacf9e97cd8fbc0facb841a09"
   },
   "outputs": [],
   "source": [
    "dfFull['Desktop Male'] = dfFull['Desktop Male'].astype('int')\n",
    "dfFull['Mobile Male'] = dfFull['Mobile Male'].astype('int')\n",
    "dfFull['Desktop Female'] = dfFull['Desktop Female'].astype('int')\n",
    "dfFull['Mobile Female'] = dfFull['Mobile Female'].astype('int')\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "7fec7881c509ca4c1c9c4ff5fa9f015f6b0caee6"
   },
   "outputs": [],
   "source": [
    "dfFull"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "3fda5ba54e3f26cc8601b6f94dfe003ead54e746"
   },
   "source": [
    "<strong><h2 id=\"C6\">Second segmented funnel - By gender and device</h2></strong>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "4a3967c05e351ace34907051f644219c0958cd85"
   },
   "source": [
    "<p>Yeah! Right now we can extract some insights. As we can see with the visual impact even if more people enter by desktop, the biggest part of this people drops. <br />But, the people who enter by mobile is almost the half in comparasion with the desktop people, but they dont drop as much as the desktop people.</p>\n",
    "<p>Thats quite interesting, another good point is that more women stays until the end.</p>\n",
    "<p>Again, the ecommerce should focus in the drop between search and payment</p>\n",
    "<p>Sadly, in the funnel we can't see the conversion page with visual impact, lets make a pie chart to see how its looks like</p>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_kg_hide-input": true,
    "_uuid": "c3a31b80e8b941b996d41b38b260b9b4da4c6a97"
   },
   "outputs": [],
   "source": [
    "colors = ['rgb(63,92,128)', 'rgb(90,131,182)', 'rgb(255,255,255)', 'rgb(127,127,127)']\n",
    "total = [sum(row[1]) for row in dfFull.iterrows()]\n",
    "n_phase, n_seg = dfFull.shape\n",
    "\n",
    "plot_width = 800\n",
    "unit_width = plot_width / total[0]\n",
    " \n",
    "phase_w = [int(value * unit_width) for value in total]\n",
    " \n",
    "# height of a section and difference between sections \n",
    "section_h = 100\n",
    "section_d = 10\n",
    "\n",
    "# shapes of the plot\n",
    "shapes = []\n",
    " \n",
    "# plot traces data\n",
    "data = []\n",
    " \n",
    "# height of the phase labels\n",
    "label_y = []\n",
    "\n",
    "height = section_h * n_phase + section_d * (n_phase-1)\n",
    "\n",
    "# rows of the DataFrame\n",
    "df_rows = list(dfFull.iterrows())\n",
    "\n",
    "# iteration over all the phases\n",
    "for i in range(n_phase):\n",
    "    # phase name\n",
    "    row_name = dfFull.index[i]\n",
    "    \n",
    "    # width of each segment (smaller rectangles) will be calculated\n",
    "    # according to their contribution in the total users of phase\n",
    "    seg_unit_width = phase_w[i] / total[i]\n",
    "    seg_w = [int(df_rows[i][1][j] * seg_unit_width) for j in range(n_seg)]\n",
    "    \n",
    "    # starting point of segment (the rectangle shape) on the X-axis\n",
    "    xl = -1 * (phase_w[i] / 2)\n",
    "    \n",
    "    # iteration over all the segments\n",
    "    for j in range(n_seg):\n",
    "        # name of the segment\n",
    "        seg_name = dfFull.columns[j]\n",
    "        \n",
    "        # corner points of a segment used in the SVG path\n",
    "        points = [xl, height, xl + seg_w[j], height, xl + seg_w[j], height - section_h, xl, height - section_h]\n",
    "        path = 'M {0} {1} L {2} {3} L {4} {5} L {6} {7} Z'.format(*points)\n",
    "        \n",
    "        shape = {\n",
    "                'type': 'path',\n",
    "                'path': path,\n",
    "                'fillcolor': colors[j],\n",
    "                'line': {\n",
    "                    'width': 1,\n",
    "                    'color': colors[j]\n",
    "                }\n",
    "        }\n",
    "        shapes.append(shape)\n",
    "        \n",
    "        # to support hover on shapes\n",
    "        hover_trace = go.Scatter(\n",
    "            x=[xl + (seg_w[j] / 2)],\n",
    "            y=[height - (section_h / 2)],\n",
    "            mode='markers',\n",
    "            marker=dict(\n",
    "                size=min(seg_w[j]/2, (section_h / 2)),\n",
    "                color='rgba(255,255,255,1)'\n",
    "            ),\n",
    "            text=\"Segment : %s\" % (seg_name),\n",
    "            name=\"Value : %d\" % (dfFull[seg_name][row_name])\n",
    "        )\n",
    "        data.append(hover_trace)\n",
    "        \n",
    "        xl = xl + seg_w[j]\n",
    "\n",
    "    label_y.append(height - (section_h / 2))\n",
    "\n",
    "    height = height - (section_h + section_d)\n",
    "    \n",
    "    # For phase names\n",
    "label_trace = go.Scatter(\n",
    "    x=[-600]*n_phase,\n",
    "    y=label_y,\n",
    "    mode='text',\n",
    "    text=dfFull.index.tolist(),\n",
    "    textfont=dict(\n",
    "        color='rgb(200,200,200)',\n",
    "        size=15\n",
    "    )\n",
    ")\n",
    "\n",
    "data.append(label_trace)\n",
    " \n",
    "# For phase values (total)\n",
    "value_trace = go.Scatter(\n",
    "    x=[600]*n_phase,\n",
    "    y=label_y,\n",
    "    mode='text',\n",
    "    text=total,\n",
    "    textfont=dict(\n",
    "        color='rgb(200,200,200)',\n",
    "        size=15\n",
    "    )\n",
    ")\n",
    "\n",
    "data.append(value_trace)\n",
    "\n",
    "layout = go.Layout(\n",
    "    title=\"<b>Segmented Funnel Chart</b>\",\n",
    "    titlefont=dict(\n",
    "        size=20,\n",
    "        color='rgb(230,230,230)'\n",
    "    ),\n",
    "    hovermode='closest',\n",
    "    shapes=shapes,\n",
    "    showlegend=False,\n",
    "    paper_bgcolor='rgba(44,58,71,1)',\n",
    "    plot_bgcolor='rgba(44,58,71,1)',\n",
    "    xaxis=dict(\n",
    "        showticklabels=False,\n",
    "        zeroline=False,\n",
    "    ),\n",
    "    yaxis=dict(\n",
    "        showticklabels=False,\n",
    "        zeroline=False\n",
    "    )\n",
    ")\n",
    "\n",
    "fig = go.Figure(data=data, layout=layout)\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "25a37a120c4a7bd77b27028dab82bc01e7d2d95e"
   },
   "outputs": [],
   "source": [
    "labels = ['Desktop Male', 'Mobile Male', 'Desktop Female', 'Mobile Female']\n",
    "values = [76, 135, 74, 167]\n",
    "colors = ['rgb(63,92,128)', 'rgb(90,131,182)', 'rgb(255,255,255)']\n",
    "\n",
    "trace = go.Pie(labels=labels, values=values,\n",
    "               textfont=dict(size=25),\n",
    "               marker=dict(colors=colors, \n",
    "                           line=dict(color='#000000', width=1)))\n",
    "\n",
    "iplot([trace], filename='styled_pie_chart')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "_uuid": "fc5d5a81e242e4ac0e98e2b62f35f5e9a9d4295d"
   },
   "source": [
    "So, here we can see how Mobile predominates over Desktop.\n",
    "\n",
    "And more womens buy finally the product.\n",
    "\n",
    "<p>And i want to recall again the the drop between the setp 2 and step 3 is not normal, they should make some CRO and AB Test strategy</p>\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "9174548334300392f9802b557018afde46c74985"
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "c850fb5771b06e6b64384bec15ba21047af27419"
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "_uuid": "09f55fb53fa223d171a2bd4b484ff37fe36929e5"
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}
